<template>
  <div>
    <div v-if="hl" class="mb-2 text-white text-sm text-left font-bold">
      {{ hl.date }}&nbsp;&nbsp;<el-text class="mx-1" type="primary">{{ hl.week }}</el-text>
    </div>
    <div class="FlipClock">
      <Flipper ref="flipperHour1" />
      <Flipper ref="flipperHour2" />
      <em>:</em>
      <Flipper ref="flipperMinute1" />
      <Flipper ref="flipperMinute2" />
      <em>:</em>
      <Flipper ref="flipperSecond1" />
      <Flipper ref="flipperSecond2" />
    </div>
    <el-row v-if="hl" justify="center" class="mt-2">
      <el-col :span="10">
        <div class="mb-2 text-orange-300 text-left" style="font-size: 16px;font-weight: 800;">
          {{ hl.lunarDate }}
        </div>
      </el-col>
      <el-col :span="14">
        <div class="mb-2 text-orange-300 text-sm text-right">

          <el-tag type="warning" v-for="(g, i) in hl.gz" :key="i" size="small" effect="dark" class="mr-1">{{ g }}</el-tag>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Flipper from "./Flipper.vue";
import ax from "../ax";
import { getClient, ResponseType } from '@tauri-apps/api/http';
let { get } = ax;
export default {
  name: "FlipClock",
  data() {
    return {
      timer: null,
      flipObjs: [],
      hl: null,
      UpdateTimer: null
    };
  },
  components: {
    Flipper,
  },
  methods: {
    // 初始化数字
    init() {
      let now = new Date();
      let nowTimeStr = this.formatDate(new Date(now.getTime()), "hhiiss");
      for (let i = 0; i < this.flipObjs.length; i++) {
        this.flipObjs[i].setFront(nowTimeStr[i]);
      }
    },
    // 开始计时
    run() {
      this.timer = setInterval(() => {
        // 获取当前时间
        let now = new Date();
        let nowTimeStr = this.formatDate(
          new Date(now.getTime() - 1000),
          "hhiiss"
        );
        let nextTimeStr = this.formatDate(now, "hhiiss");
        for (let i = 0; i < this.flipObjs.length; i++) {
          if (nowTimeStr[i] === nextTimeStr[i]) {
            continue;
          }
          this.flipObjs[i].flipDown(nowTimeStr[i], nextTimeStr[i]);
        }
      }, 1000);
    },
    // 正则格式化日期
    formatDate(date, dateFormat) {
      /* 单独格式化年份，根据y的字符数量输出年份
     * 例如：yyyy => 2019
            yy => 19
            y => 9
     */
      if (/(y+)/.test(dateFormat)) {
        dateFormat = dateFormat.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      // 格式化月、日、时、分、秒
      let o = {
        "m+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "i+": date.getMinutes(),
        "s+": date.getSeconds(),
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(dateFormat)) {
          // 取出对应的值
          let str = o[k] + "";
          /* 根据设置的格式，输出对应的字符
           * 例如: 早上8时，hh => 08，h => 8
           * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
           * 例如: 下午15时，hh => 15, h => 15
           */
          dateFormat = dateFormat.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : this.padLeftZero(str)
          );
        }
      }
      return dateFormat;
    },
    // 日期时间补零
    padLeftZero(str) {
      return ("00" + str).substr(str.length);
    },
    scheduleGetUserLocation() {
      const now = new Date();
      const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 0, 1, 0);
      const delay = nextHour - now;

      setTimeout(() => {
        // this.getUserLocation();
        this.UpdateTimer = setInterval(this.getDate.bind(this), 1000 * 60 * 60);
      }, delay);
    },
    async getDate() {

      const client = await getClient();
      const response = await client.get('https://zhangteng.cloud/5001/api/Rss/GetLunarDate', {
        timeout: 30,
        // the expected response type
        responseType: ResponseType.JSON
      });
      console.log(response)
      this.hl = response.data;
      this.hl.ryi = this.hl.yj[0].join(',');
      this.hl.ryilist = this.hl.ryi.split(',')
      this.hl.rji = this.hl.yj[1].join(', ');
      this.hl.rjilist = this.hl.rji.split(',')
      this.hl.syi = this.hl.yj[2].join(', ');
      this.hl.syilist = this.hl.syi.split(',')
      this.hl.sji = this.hl.yj[3].join(', ');
      this.hl.sjilist = this.hl.sji.split(',')
      this.hl.gz = this.hl.ganZhi.split('-')
      console.log(this.hl)

    },
  },
  mounted() {
    this.flipObjs = [
      this.$refs.flipperHour1,
      this.$refs.flipperHour2,
      this.$refs.flipperMinute1,
      this.$refs.flipperMinute2,
      this.$refs.flipperSecond1,
      this.$refs.flipperSecond2,
    ];
    this.init();
    this.run();
    this.scheduleGetUserLocation();
  },
  beforeDestroy() {
    clearInterval(this.UpdateTimer);
  },
  created() { this.getDate(); },

};
</script>

<style>
.FlipClock {
  text-align: center;
}

.FlipClock .M-Flipper {
  margin: 0 3px;
}

.FlipClock em {
  display: inline-block;
  line-height: 65px;
  font-size: 42px;
  font-style: normal;
  vertical-align: top;
}
</style>
